import React from 'react'
import { useRoutes, Navigate } from 'react-router-dom'
import NotFound from '../components/NotFound/NotFound'
import AuthComponent from '../components/AuthComponent/AuthComponent'
import Login from '../view/Login/Login1'
import Home from '../view/Home/Home'
import Todo from '../view/Todo/Todo'
import User from '../view/User/User'
import Setting from '../view/Setting/Setting'
import Detail from '../view/Detail/Detail'
import Write from '../view/Write/Write'
import Alter from '../components/Alter/Alter'

export default function Mouter() {
    const element = useRoutes([
        // 路由拦截
        {
            path: '/',
            element: <AuthComponent>
                <Home></Home>
            </AuthComponent>
        },
        // 登入
        {
            path: '/login',
            element: <Login />
        },
        // home页面
        {
            path: '/home',
            element: <Home />,
            children: [
                {
                    path: 'todo',
                    element: <Todo />
                },
                {
                    path: 'user',
                    element: <User />
                },
                {
                    path: 'write',
                    element: <Write />
                },
                {
                    path: 'setting',
                    element: <Setting />
                },
                {
                    path: 'Detail',
                    element: <Detail />
                },
                {
                    path: 'Alter/:myid',
                    element: <Alter />
                },
                {
                    path: '',
                    element: <Navigate to='/home/Detail' />
                },
            ]
        },

        // 路径错误
        {
            path: '*',
            element: <NotFound />
        },
    ])
    return element
}
